<template>
  <div id="toTop" @click="toTop">
    <img src="@/assets/svg/toTop.svg" alt="" class="toTop-svg">
  </div>
</template>

<script>
export default {
  name: "ToTop",
  methods: {
    toTop() {
      let t =
              document.documentElement.scrollTop || document.body.scrollTop,
          e = 50,
          i = setInterval(function () {
            (t -= e),
                (document.body.scrollTop = t),
                (document.documentElement.scrollTop = t),
            t <= 0 && clearInterval(i);
          }, 10);
    },
  },
}
</script>

<style scoped>
#toTop {
  width: 50px;
  height: 50px;
  border-radius: 15px;
  background-color: rgba(79, 79, 79, .14);
  z-index: 150;
  position: fixed;
  bottom: 40px;
  right: 20px;
  cursor: pointer;
  transition: all .3s ease
}

#toTop:hover {
  background-color: rgba(79, 79, 79, .34)
}

.toTop-svg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%)
}
</style>